<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理函数参数</title>
</head>
<body>
<div id="app">
    <!-- 函数无参的情况下，调用的是可以有() 也可以没有 () -->
    <button v-on:click="btn1Clicked">按钮1</button>
    <button v-on:click="btn1Clicked()">按钮1</button>

    <hr>
    <!--在函数有一个参数的情况下，调用没有 （）， 会将 事件传入-->
    <button v-on:click="btn2Clicked">按钮2</button>
    <!--在函数有一个参数的情况下，调用使用了 （）， 函数的参数为 undefined-->
    <button v-on:click="btn2Clicked()">按钮2</button>
    <!--在函数有一个参数的情况下，调用传入参数，使用真实传入的参数-->
    <button v-on:click="btn2Clicked('abc')">按钮2</button>

    <hr>
    <!--在函数有一个参数的情况下，调用没有 （）， 会将 事件作为第一个参数传入，其他为 undefined -->
    <button v-on:click="btn3Clicked">按钮3</button>
    <!--在函数有一个参数的情况下，调用使用了 （）， 函数的参数为 undefined-->
    <button v-on:click="btn3Clicked()">按钮3</button>
    <!--在函数有一个参数的情况下，调用传入的参数个数小于函数参数个数， 对应的传入，其他函数的参数为 undefined-->
    <button v-on:click="btn3Clicked('abc')">按钮3</button>

    <hr>
    <!--传入事件-->
    <button v-on:click="btn2Clicked($event)">按钮2</button>
</div>

<script type="module">
    import {createApp} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                function btn1Clicked() {
                    console.log("btn1Clicked");
                }

                function btn2Clicked(event) {
                    console.log("btn2Clicked");
                    console.log(event);
                }

                function btn3Clicked(event, param) {
                    console.log("btn3Clicked");
                    console.log(event);
                    console.log(param);
                }



                return {
                    btn1Clicked,
                    btn2Clicked,
                    btn3Clicked,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>